<template>
  <div class="index-main">
    <!-- top区域 -->
    <div class="top-container">
      <el-menu
        class="el-menu-horizontal-demo"
        mode="horizontal"
        background-color="#262626"
        text-color="#AEAEAE"
      >
        <el-menu-item index="1" class="icon">
          <a href="#/admin/myinfo/message">
            <i class="el-icon-chat-square"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="2" class="icon">
          <a href="#/admin/myinfo/myindex">
            <i class="el-icon-user"></i>
          </a>
        </el-menu-item>
        <el-menu-item index="3" class="icon">
          <a href="#/admin/myinfo/collection">
            <img
              src="../../assets/images/heart_icon.png"
              alt="红心图标"
              class="icon_size"
            />
          </a>
        </el-menu-item>
        <el-menu-item index="4" class="icon">
          <a href="#/admin/myinfo/uploadshow">
            <i class="el-icon-upload"></i>
          </a>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 搜索区域 -->
    <div class="select_search">
      <div class="div_1">
        <el-date-picker
          v-model="formLabelAlign.date"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div class="div_1">
        <el-date-picker
          v-model="formLabelAlign.date"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div class="div_2">
        <el-select placeholder="选择类别" v-model="formLabelAlign.typeid">
          <el-option label="环境-3D" value="1"></el-option>
          <el-option label="艺术品-3D" value="2"></el-option>
          <el-option label="植物-3D" value="3"></el-option>
          <el-option label="物品-3D" value="4"></el-option>
          <el-option label="粒子动画" value="5"></el-option>
          <el-option label="艺术品-2D" value="6"></el-option>
          <el-option label="视频" value="7"></el-option>
          <el-option label="材料" value="8"></el-option>
          <el-option label="音乐" value="9"></el-option> 
        </el-select>
      </div>
      <div class="div_3">
        <el-input
          type="text"
          id="search"
          v-model="formLabelAlign.goodName"
        ></el-input>
      </div>
      <div class="div_4">
        <el-button
          class="searchbutton"
          style="color: white"
          @click="getMyCollectionDataQuery()"
        ><i class="el-icon-search"></i>
        </el-button>
      </div>      
    </div>
    <!-- 消息列表区域 -->
    <el-table 
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{color:'#CBCBCB'}"
    >
      <el-table-column prop="date" label="2022-1-1" width="350">
        <div @click="dialogVisible = true">
          <img
            style="width: 300px; height: 300px"
            src="../../common/picture/ZT.png"
          />
        </div>
      </el-table-column>
      <el-table-column prop="name" width="350">
        <div class="resourceDetails">
          <h2>{{ tableData.titlename }}</h2>
          <p>名称: {{ tableData.goodname}}</p>
          <p>价格: {{ tableData.price }}</p>
          <p>分类: {{ tableData.type }}</p>
        </div>
      </el-table-column>
      <el-table-column prop="address" width="350">
        <div class="userInfos">
          <!-- <p v-if="tableData.userid==this.id">{{ "拥有者" }}:{{ tableData.uesr }}</p> -->
          <p>{{ "购买者" }}:{{ tableData.uesr }}</p>
          <p>ID: {{ tableData.uesrid }}</p>
          <p>时间: </p>
        </div>
      </el-table-column>
      <el-table-column prop="goodstatus" width="350">
          <!-- <el-button class="statebutton_style" :formatter="formatStatus">{{ tableData.goodstatus }}</el-button> -->
          <el-button class="statebutton_style" >出售成功</el-button>
      </el-table-column>
    </el-table>
    <!-- 商品详情 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      show-close="false"
      close-on-press-escape
      :model="tableDetail"
      class="goodsDetails"
    >
      <div class="detailsContainer">
        <div class="row_1">
          <div class="column_1">
            <img
              :src="tableDetail.coverurl"
              alt="封面图片"
              class="imgsize"
            />
          </div>
          <div class="column_2">
            <span class="goodnameSpan">{{ tableDetail.goodname }}枕头</span>
            <div class="row_1 card_limit">
              <el-card shadow="never">
                <span class="font_style1">
                  Token ID : {{ tableDetail.tokenid }}955382437372227876711640338944820019
                </span>
              </el-card>
              <span 
                class="el-icon-document-copy copyLink"
                v-clipboard:copy="tableDetail.tokenid"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              ></span>
            </div>
            <p class="font_style2">
              拥有者 ：{{ tableDetail.user }}
            </p>
            <p class="font_style2">
              作者 ：{{ tableDetail.user }}
            </p>
            <p class="font_style2">
              分类 ：{{ tableDetail.type }}
            </p>
          </div>
        </div>
        <div class="row_2">
          <span class="font_style3">商品简介：</span>
          <el-card shadow="always" class="details-card">
            <p class="font_style2">
              {{ tableDetail.introduction }}
            </p>
          </el-card>
        </div>
        <div class="row_2">
          <span class="font_style3">历史交易记录：</span>
          <el-card shadow="always" class="details-card">
            <div class="records">
            <div>
              <p class="font_style3">日期</p>
              <p class="font_style2">{{ tableDetail.transaction.date }}</p>
            </div>
            <div>
              <p class="font_style3">价格</p>
              <p class="font_style2">{{ tableDetail.transaction.price }}</p>
            </div>
            <div>
              <p class="font_style3">拥有者</p>
              <p class="font_style2">{{ tableDetail.transaction.owner }}</p>
            </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-dialog>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      :page-size="pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 30px; text-align: center"
    >
      <el-button
        style="
          border: 1px solid;
          border-color: #b4bccc;
          padding: 0px;
          margin-left: 6px;
        "
        size="mini"
        @click="handleCurrentChange"
        >GO</el-button
      >
    </el-pagination>
  </div>
</template>
<script>
import { getcheckQuery } from "crm/myinfo/myinfo.js";
export default {
data() {
  this.id=localStorage.getItem("userid");
    return {
        dialogVisible : false,
        tableData: [],
        currentpage: 1,
        total: 0,
        pagesize: 10,
        formLabelAlign: {
          goodName: "",
          date: "",
          typeid: undefined,
        },
        //所有商品数据
        tableData: [],
        typename: [],
        typeid: [],
        goods: {
          goodid: 1,
          coverurl: "",
          covername: "",
          goodstatus: 0,
          goodname: "",
          price: 0.0,
        },
        total: 0,
        //商品详情
        tableDetail:{
          goodid: "",
          goodurlname: "",
          price: 22.2,
          type: "",
          goodname: "",
          coverurl: "https://imct.oss-cn-beijing.aliyuncs.com/file/1650959231548&timg.jpg",
          covername: "",
          user: "",
          userid: "1",
          pics:{
            picurl: "",
            picname: "",
          },
          documenturl: "",
          documentname: "",
          transaction:{
            date: "",
            price: 12.6,
            owner: "",
          },
          introduction: "",
          tokenid: 0,
        },
    };
},
created() {
    this.getcheckData();
  },
methods:{
    handleCurrentChange(val) {
      this.currentpage = val;
      this.getcheckData();
    },
    //搜索..
    doSearch() {
      this.currentpage = 1;
      this.getcheckData();
    },
    //分页加载..
    goToPage(val) {
      this.currentpage = val;
      this.getcheckData();
    },
    //
    formatStatus(row, column) {
      switch (row.goodstatus) {
        case 0:
          return "已通过";
        case 1:
          return "已驳回";
        case 2:
          return "交易成功";
      }
    },
    getcheckData(){
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      payload.pageSize = this.pageSize
      payload.currentPage = this.currentPage
      payload.goodName = this.formLabelAlign.goodName
      payload.date = this.formLabelAlign.date
      payload.typeid = this.formLabelAlign.typeid
      getcheckQuery(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableData = res.data.goods;
            console.log(res.data.goods);
          }
        })
        .catch((err) => {});
      // }
      // });
    },
    //获取商品详情数据
    getMygoodDetail() {
      let payload = {};
      payload.userid = localStorage.getItem("userid");
      console.log(this.goods.goodid);
      payload.goodid = this.goods.goodid;
      // payload.goodid = ??
      getGoodDetail(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.tableDetail = res.data;
          } else {
            alert("数据加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    // 复制成功时的回调函数
    onCopy (e) {
    this.$message.success("内容已复制到剪切板！")
    },
    // 复制失败时的回调函数
    onError (e) {
    this.$message.error("抱歉，复制失败！")
    },
  }
}
</script>
<style scoped>
.index-main {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0%;
  flex-direction: column;
}
.top-container {
  width: 100%;
  height: 56px;
  margin: 0%;
  padding: 0%;
  background-color: #262626;
  display: flex;
  flex-direction: row;
}
.el-menu {
  height: 55px;
  width: 300px;
  border-bottom: solid 1px #262626;
  position: relative;
  left: 40%;
}
.icon {
  width: 64px;
  height: 56px;
}
.icon_size {
  width: 30px;
  height: 25px;
}
.icon i {
  font-size: 28px;
}
.select_search {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0%;
  display: flex;
  flex-direction: row;
}
.div_1 {
  position: relative;
  left: 38%;
}
.div_2 {
  position: relative;
  left: 38%;
}
.div_3 {
  position: relative;
  left: 38%;
}
.div_4 {
  position: relative;
  left: 38%;
}
.searchbutton {
  background: #2F2F2F;
  border: 1px solid #2F2F2F;
}
.search {
  margin: 0% 3%;
  width: 56px;
}
/deep/.el-input__inner {
  background-color: #2F2F2F;
  border: 5px solid #292929;
  border-radius: 20px;
  font-family: 'Youshebiaotihei';
  color:#787878;
  font-size: 20px;
  width: 200px;
}
.text_note {
  font-family: 'Youshebiaotihei';
}
.resourceDetails {
  font-family: 'Alibaba-PuHuiTi';
  font-size: 15px;
  color: #C9C9C9;
}
.userInfos {
  font-family: 'Alibaba-PuHuiTi-Bold';
  font-size: 15px;
  color: #C9C9C9;
}
.image_style{
  width: 30px;
  height: 35px;
  padding-inline: 10px;
  float: right;
}
/* 修改表格背景颜色 */
/* 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  border: 0;
}
/* 去除底边框 */
::v-deep.el-table td.el-table__cell {
  border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
  border: 0;
}
.statebutton_style {
  height: 50px;
  width: 150px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #D77025;
  font-size: 28px;
}
/* 商品详情 */
.goodsDetails /deep/.el-dialog__header {
  background-color: #1e1e1e;
}
.goodsDetails /deep/.el-dialog__body {
  background-color: #1e1e1e;
}
.goodsDetails /deep/.el-dialog__footer {
  background-color: #1e1e1e;
  color: #333;
  text-align: center;
}
.goodsDetails /deep/.el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
}
.goodsDetails /deep/.el-dialog__headerbtn i {
  color: #eeeeee;
}
.detailsContainer {
  background-color: #1e1e1e;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.row_1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.row_2 {
  margin-top: 20px;
  margin-left: 20px;
}
.column_2 {
  margin-left: 50px;
}
.imgsize {
  width: 250px;
  height: 250px;
}
.goodnameSpan {
  font-family: 优设标题;
  font-size: 32px;
  color: #a2662f;
}
.card_limit .el-card {
  background-color: #1e1e1e;
  border: #1e1e1e;
  margin: 0px;
  padding: 0px;
}
.card_limit /deep/ .el-card__body {
  padding: 0px;
  padding-top: 20px;
}
.downloadLink {
  height: 35px;
  font-size: 25px;
  align-items: center;
  color: #CECECE;
  padding-left: 5px;
}
.copyLink {
  height: 25px;
  font-size: 20px;
  color: #CECECE;
  padding-left: 20px;
  padding-top: 20px;
}
.font_style1 {
  font-family: 优设标题;
  font-size: 15px;
  color: #cecece;
}
.font_style2 {
  font-family: Alibaba-PuHuiTi;
  font-size: 17px;
  color: #cecece;
}
.font_style3 {
  font-family: 优设标题;
  font-size: 22px;
  color: #cecece;
}
.details-card {
  margin-top: 10px;
  background-color: #1e1e1e;
  width: 600px;
  height: 150px;
  border: 3px solid #666666;
  border-radius: 5px;
}
.records {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: 优设标题;
  font-size: 15px;
  color: #cecece;
}
</style>